<template>
    <div class="recomment">
        <div class="r-c" v-if="rType == 1">
            <div class="r-top f-b-r">
                <div class="r-t-left">{{ list?.type }}</div>
                <div class="r-t-more" @click="goToMore(list?.lid, 'label')">更多&nbsp;&gt;</div>
            </div>
            <div class="r-content">
                <ul class="r-c-ul f-l-r">
                    <template v-for="(item, index) in list?.items" :key="item.pid">
                        <li class="r-c-li f-c-c" v-if="index < 5" @click="goToPoetryDetail(item.pid)">
                            <div class="l-top"><img v-lazy="item.p_cover ? item.p_cover : getAssetsFile(imgList[index])" alt=""></div>
                            <div class="l-title ellipsis">{{ item.p_title }}</div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
        <div class="r-c" v-if="rType == 2 && list && list.length > 0">
            <div class="r-top f-b-r">
                <div class="r-t-left">诗单</div>
                <div class="r-t-more" @click="goToMore(list?.pl_id, 'poems')">更多&nbsp;&gt;</div>
            </div>
            <div class="r-content">
                <ul class="r-c-ul f-l-r">
                    <template v-for="item in list" :key="item.pid">
                        <li class="r-c-li f-c-c" @click="goToPoemsDetail(item.pl_id)">
                            <div class="l-top"><img :src="(item.pl_cover &&  item.pl_cover != '无') ? item.pl_cover : getAssetsFile('cover/poems/default-poems.png')" alt=""></div>
                            <div class="l-title ellipsis">{{ item.pl_name }}</div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router"
import { onMounted, ref, toRefs } from "vue"
import { getAssetsFile } from '@/utils/util'

const props = defineProps({
    type: {
        type: Number,
        dafault: 1
    },
    list: {
        type: Object,
        dafault: {}
    },
    imgList: {
        type: Object,
        dafault: []
    },
})
const { list, imgList, type } = toRefs(props)

let rType = ref<Number>(1)
const initData = () => {
    rType.value = type?.value ? type.value : 1
}

onMounted(() => {
    initData()
})

// 点击更多
const goToMore = (lid: number = -1, type: string) => {
    router.push({ 
        name: 'moreDetail',
        params: {
            id: lid,
            type: type
        }
    })
}

// 跳转诗歌详情
const goToPoetryDetail = (pid: number) => {
    router.push({ 
        name: 'poetryDetail',
        params: {
            id: pid
        }
    })
}

// 跳转诗单详情
const goToPoemsDetail = (pl_id: number) => {
    router.push({ 
        name: 'poemsDetail',
        params: {
            poemsId: pl_id
        }
    })
}
</script>

<style lang="less" scoped>
.recomment {
            width: 100%;
            min-height: 10.5rem;
            .r-c {
                height: 100%;
                .r-top {
                    height: 2.5rem;
                    line-height: 1.5;
                    padding-left: 0.75rem;
                    padding-right: 0.75rem;
                    .r-t-left {
                        font-weight: 500;
                        font-size: 17px;
                        color: var(--font-color-red);
                    }
                    .r-t-more {
                        font-size: 13px;
                        color: var(--content-font-color);
                    }
                }
                .r-content {
                    width: 100%;
                    height: 8rem;
                    overflow-x: auto;
                    .r-c-ul {
                        .r-c-li {
                            margin-right: 0.75rem;
                            .l-top {
                                width: 6rem;
                                height: 6rem;
                                img {
                                    vertical-align: bottom;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .l-title {
                                text-align: center;
                                height: 2rem;
                                line-height: 1.5rem;
                                width: 100%;
                                padding-top: 0.2rem;
                                box-sizing: border-box;
                            }
                            &:nth-last-child(1) {
                                margin-right: 0;
                            }
                        }
                    }
                }
            }
        }
</style>